<template>
  <div class="Company">
    <div class="companyHead">
      <div class="companyHead_Title">{{ qyInfo?.qymc || '企业名称' }}</div>
      <div style="font-size: 16px">{{ qyInfo?.dwdz }}</div>
    </div>
    <div class="companyMain">
      <!-- 无数据展示 -->
      <div
        v-if="companyList.length == 0"
        style="font-size: 30px; line-height: 200px; text-align: center; color: #ccccccb0"
      >
        暂无数据
      </div>
      <div v-for="item in companyList" v-else :key="item.id" class="main-box">
        <div class="main-type">{{ item.gw }}</div>
        <!-- <div class="main-message"> -->
        <div>{{ item.xm }}</div>
        <div>{{ item.gddh || item.yddh }}</div>
        <!-- </div> -->
      </div>
    </div>
    <div class="companyTag">
      <div v-for="(item, index) in tagList" :key="index">
        <div class="text-center">
          <span :style="{ fontSize: '50px', color: item.color, fontWeight: 'bolder' }">{{
            item.num
          }}</span>
          <span class="ml-[10px]">个</span>
        </div>
        <div
          class="p-2 w-[180px] text-center"
          style="font-size: 20px"
          :style="{
            background: item.color,
            borderBottom: '3px solid',
            borderBottomColor: item.color,
          }"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <div class="companyDes">
      <!-- 无数据展示 -->
      <div
        v-if="qyInfo?.jyfw == null"
        style="font-size: 30px; line-height: 300px; text-align: center; color: #ccccccb0"
      >
        暂无数据
      </div>
      <p v-else>
        {{ qyInfo?.jyfw }}
      </p>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getHgQyxxInfo, getHgSltjbInfo, getHgFzrxxbInfoList } from '@/service'
import { useBusinessStore } from '@/store'
const store = useBusinessStore()
// 危险源list
const tagList = ref([
  {
    id: 0,
    title: '一级重大危险源',
    num: 0,
    color: 'rgba(255, 51, 51, .4)',
  },
  {
    id: 1,
    title: '二级重大危险源',
    num: 0,
    color: 'rgba(255, 153, 0, .4)',
  },
  {
    id: 2,
    title: '三级重大危险源',
    num: 0,
    color: 'rgba(255, 255, 0, .4)',
  },
  {
    id: 3,
    title: '四级重大危险源',
    num: 0,
    color: 'rgba(0, 255, 255, .4)',
  },
])
//  企业信息
const qyInfo: any = ref({})
// 企业负责人list
const companyList: any = ref([])
// 企业id
const qyId = computed(() => {
  return store.jqInfo.zddwid
})
watch(
  qyId,
  (newValue, oldValue) => {
    getHgQyxxInfo({ qyId: newValue }).then((res) => {
      // getHgQyxxInfo({ qyId: '128b05b3dda846529f97f8ca27fd3d96' }).then(res => {
      qyInfo.value = res
    })
    // 根据企业id查负责人info
    getHgFzrxxbInfoList({ qyId: newValue }).then((res) => {
      // getHgFzrxxbInfoList({ qyId: '128b05b3dda846529f97f8ca27fd3d96' }).then(res => {
      companyList.value = res
    })
    // 根据企业id查危险源info
    getHgSltjbInfo({ qyId: newValue }).then((res) => {
      // getHgSltjbInfo({ qyId: '128b05b3dda846529f97f8ca27fd3d96' }).then(res => {
      tagList.value[0].num = (res as any)?.yijgs || 0
      tagList.value[1].num = (res as any)?.erjgs || 0
      tagList.value[2].num = (res as any)?.sanjgs || 0
      tagList.value[3].num = (res as any)?.sijgs || 0
    })
  },
  { immediate: true }
)

onMounted(() => {})
</script>
<style lang="less" scoped>
.Company {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.companyHead {
  color: #fff;
  width: 100%;
  height: 60px;
  margin: 10px;

  .companyHead_Title {
    font-size: 28px;
    font-weight: bolder;
  }
}

.companyMain {
  font-size: 20px;
  font-weight: 400;
  padding-top: 10px;
  width: 100%;
  height: 210px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(1, 10, 15, 0.4);
  color: #fff;
  overflow: auto;

  .main-box {
    margin: 0 10px;
    display: flex;
    justify-content: space-between;

    div {
      flex-shrink: 0;
      width: 33%;
      text-align: left;
    }
  }
}

.main-type {
  color: rgba(0, 255, 216, 1);
  font-size: 20px;
  // width: 160px;
}

.main-message {
  display: flex;
  justify-content: space-between;
}

.companyTag {
  width: 100%;
  height: 300px;
  background: rgba(1, 10, 15, 0.4);
  border-radius: 5px;

  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: center;
}

.companyDes {
  width: 100%;
  height: 350px;
  box-sizing: border-box;
  border-radius: 5px;
  padding: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(1, 10, 15, 0.4);
  font-size: 20px;
  overflow-y: auto;
}
</style>
